html {
    font-size: 100px;
}

body {
    font-size: .12rem;
    line-height: .14rem;
}

.icon {
    font-size: .12rem;
    line-height: .14rem;
}

.bg_purple {
    background-color: #9F9BCC;
}

.bg_blue {
    background-color: #8DB7E5;
}

.bg_yellow {
    background-color: #E6B144;
}

.bg_orange {
    background-color: #F77D36;
}

.bg_red {
    background-color: #C26862;
}

.color_red {
    color: #D6323E;
}

.color_green {
    color: #26B979;
}

.overflow_hidden {
    overflow: hidden;
}

/* 树组件公共样式 */

.tree_assembly {
    position: relative;
}

/* 链接点 */

.tree_line_dot {
    position: absolute;
    width: .01rem;
    height: .01rem;
    background: #d00;
    visibility: hidden;
}

.tree_line_dot.dot_top {
    left: 50%;
    top: 0;/* -.01rem; */
}

.tree_line_dot.dot_bottom {
    left: 50%;
    bottom: 0;
}

.tree_line_dot.tree_line_dot_left {
    top: 50%;
    left: 0;
}

.tree_line_dot.tree_line_dot_right {
    top: 50%;
    right: 0;
}

#tree_map {
    position: relative;
    margin-top: .2rem;
}

#svgcontainer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* ----树顶部节点---- */

.tree_top {
    width: 1.305rem;
    height: .4rem;
    line-height: .4rem;
    border-radius: .04rem;
    color: #ffffff;
    background-color: #DDAF59;
}

/* ----联系人---- */

.tree_human {
    position: relative;
    color: #AE5F5A;
    max-width: 1.96rem;
    min-width: 1.35rem;
    height: .3rem;
    background: #F4F4F4;
    border-radius: .6rem;
    margin-top: .2rem;
}

.tree_human .tree_human_bg:not(.overflow_hidden) {
    padding: .03rem;
    line-height: .24rem;
}

.tree_human .tree_human_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: .6rem;
    display: flex;
    justify-content: flex-start;
}

.tree_human .tree_human_img {
    width: .24rem;
    height: .24rem;
    border-radius: 50%;
    overflow: hidden;
    border: .01rem solid #ddd;
}

.tree_human .tree_human_img>img {
    width: 100%;
    height: 100%;
}

.tree_human .tree_human_position {
    margin-left: .1rem;
    margin-right: .05rem;
}

.tree_human .tree_human_visitnum {
    position: absolute;
    right: 0.05rem;
    top: -.16rem;
    width: .32rem;
    height: .32rem;
    line-height: .32rem;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    background: #CB706A;
    box-shadow: 0 .04rem .08rem 0 rgba(208, 169, 166, 0.6);
    border-radius: 50%;
    transform: scale(0.5) translate(.02rem, 0);
    cursor: pointer;
    z-index: 1;
}

.tree_human .tree_human_bottomborder {
    position: absolute;
    left: .08rem;
    bottom: 0;
    height: .02rem;
    border-bottom-left-radius: 50%;
}

.tree_human .tree_human_bottomborder.bg_purple {
    width: 100%;
}

.tree_human .tree_human_bottomborder.bg_blue {
    width: 80%;
}

.tree_human .tree_human_bottomborder.bg_yellow {
    width: 60%;
}

.tree_human .tree_human_bottomborder.bg_orange {
    width: 40%;
}

.tree_human .tree_human_bottomborder.bg_red {
    width: 20%;
}

/* ----子机构---- */

.tree_sub {
    max-width: 1.35rem;
    border-radius: .04rem;
    margin-top: .2rem;
    font-size: 0;
    height: min-content;
}

.tree_sub .tree_sub_top {
    color: #DDAF59;
    text-align: center;
    padding: .07rem;
    position: relative;
    border: .01rem solid #ddaf59;
    border-top-left-radius: .04rem;
    border-top-right-radius: .04rem;
    display: flex;
    justify-content: center;
}

.tree_sub .tree_sub_top .tree_sub_name {
    max-width: .54rem;
    font-size: .12rem;
    line-height: .17rem;
}

.tree_sub .tree_sub_top .tree_triangle {
    position: absolute;
    bottom: -.04rem;
    left: 50%;
    width: .06rem;
    height: .06rem;
    background: #DDAF59;
    transform: rotate(45deg)
}
.tree_sub .tree_sub_top .tree_sub_edit_modal{
    position: absolute;
    top: 80%;
    right: 0;
    width: 1.1rem;
    height: .55rem;
    background: #FFFFFF;
    box-shadow: 0 0.02rem 0.08rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.06rem;
    cursor: pointer;
    z-index: 9;
    /* 默认隐藏 */
    display: none;
}
.tree_sub .tree_sub_top .tree_sub_edit_modal .tree_triangle{
    top: -.04rem;
    background: #FFFFFF;
}
.tree_sub .tree_sub_top .tree_sub_edit_modal p{
    color: #333333;
    padding: 0.04rem 0 0.06rem 0;
    font-size: 0.12rem;
    line-height: 0.17rem;
    text-align: center;
}
.tree_sub .tree_sub_top .tree_sub_edit_modal p.split{
    border-bottom: 0.01rem solid#E9E9E9;
}

/* 子机构信息 */
.tree_sub .tree_sub_msg {
    height: .22rem;
    padding: .02rem 0;
    color: #ffffff;
    background-color: #DDAF59;
    overflow: hidden;
    border: .01rem solid #ddaf59;
    border-bottom-left-radius: .04rem;
    border-bottom-right-radius: .04rem;
}

.tree_sub .tree_sub_msg_title {
    text-align: center;
    font-size: .13rem;
    line-height: .17rem;
}

.tree_sub .tree_sub_msg .tree_sub_msg_show_detail {
    cursor: pointer;
    transform: scale(0.8);
    display: inline-block;
}

.tree_sub .tree_sub_msg .zhankaishouqi_rotate180 {
    transform: scale(0.8) rotateZ(180deg);
}

.tree_sub .tree_sub_msg .tree_sub_msg_detail li {
    font-size: .12rem;
    line-height: .18rem;
    transform: scale(0.8);
    display: flex;
    justify-content: space-between;
}

.tree_sub .tree_dot {
    width: .04rem;
    height: .04rem;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    margin: .02rem 0;
}

/* ----编辑按钮---- */

.tree_item_edit {
    margin-left: .1rem;
    cursor: pointer;
    z-index: 2;
}

.tree_item_edit .icon_split_line {
    display: inline-block;
    width: .01rem;
    height: .1rem;
    margin: 0 0.06rem;
}

.tree_human .tree_item_edit .icon_split_line {
    background: #AE5F5A;
}

.tree_sub .tree_item_edit .icon_split_line {
    background: #DDAF59;
}

.tree_human .tree_item_edit {
    position: absolute;
    right: .1rem;
}

/* hide_edit 控制显示隐藏编辑按钮 */

.tree_edit_item.hide_edit .tree_item_edit {
    display: none;
}

.tree_edit_item.hide_edit .tree_item_edit {
    display: none;
}

.tree_edit_item.hide_edit .tree_sub_name {
    max-width: 100%;
}

/* 联系人名称编辑显示拜访数目 */

.tree_human:not(.hide_edit) {
    width: 1.77rem;
}

.tree_human:not(.hide_edit) .tree_human_visitnum {
    display: none;
}

.tree_human.hide_edit .tree_human_visitnum {
    display: block;
}
/* 联系人新增 */
.tree_human.tree_human_add:not(.hide_edit) {
    width: 1.96rem;
}
.tree_human.tree_human_add .tree_human_msg input{
    width: 60%;
}

/* ----工具---- */

.tree_tools {
    position: fixed;
    bottom: 57px;
    right: 60px;
    width: 58px;
    height: 325px;
    font-size: 12px;
    line-height: 18px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px 0 rgba(195, 200, 205, 0.43);
    border-radius: 4px;
    padding: 20px 17px;
    color: #666666;
}

.tree_tools li:not(:last-child) {
    padding: 0 0 20px 0;
    cursor: pointer;
}

.tree_tools p {
    text-align: center;
}

.tree_tools p:first-child {
    padding-bottom: 4px;
}

.tree_tools .icon {
    font-size: 18px;
    line-height: 18px;
    color: #B6B6B6;
}

/* .tree_tools {
    position: fixed;
    bottom: .57rem;
    right: .06rem;
    width: .58rem;
    height: 3.25rem;
    font-size: .12rem;
    background: #FFFFFF;
    box-shadow: 0 .02rem .06rem 0 rgba(195, 200, 205, 0.43);
    border-radius: .04rem;
    padding: .07rem .17rem;
    color: #666666;
}

.tree_tools li {
    padding: .05rem 0;
    cursor: pointer;
}

.tree_tools p {
    text-align: center;
}

.tree_tools p:first-child {
    padding-bottom: .02rem;
}

.tree_tools .icon {
    font-size: .18rem;
    color: #B6B6B6;
} */

/* ----图例---- */

.tree_legend {
    margin: .2rem 1.3rem .57rem 0;
    width: 1.1rem;
    font-size: .12rem;
    color: #666666;
}

.tree_legend li {
    width: .2rem;
    height: .08rem;
    margin-right: .02rem;
    cursor: pointer;
}
.tree_legend_ul{
    margin: .05rem;
}

/* 全背景 */

.fixed_bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 998;
}

.fixed_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 1.1rem;
    height: .5875rem;
    background: #000000;
    border-radius: .04rem;
    opacity: 0.5;
    padding: .1rem;
}

.visitNumModal {
    color: #ffffff;
    transform: scale(.8);
}

.visitNumModal p {
    display: flex;
    justify-content: space-between;
}

.visitNumModal span {
    font-weight: 400;
    font-size: .12rem;
    line-height: .2rem;
}

/* 时期选择 */
.period {
    display: flex;
    justify-content: flex-start;
    height: .28rem;
    border-radius: .04rem;
    overflow: hidden;
    margin-left: .1rem;
}

.period li {
    position: relative;
    text-align: center;
    line-height: .26rem;
    border: .01rem solid #E9E9E9;
    border-right: transparent;
    width: .8rem;
    color: #666;
}

.period li>a {
    display: inline-block;
    position: absolute;
    top: -.01rem;
    left: -.01rem;
    right: -.01rem;
    bottom: -.01rem;
    border: .01rem solid transparent;
    z-index: 2;
}

.period li>a:hover {
    color: #000;
}

.period li:last-child {
    border-right: .01rem solid #E9E9E9;
}

.period li:last-child, .period li:last-child>a {
    /* border-radius:0 4px 4px 0; */
    border-top-right-radius: .04rem;
    border-bottom-right-radius: .04rem;
}

.period li:first-child, .period li:first-child>a {
    /* border-radius:4px 0 0 4px; */
    border-top-left-radius: .04rem;
    border-bottom-left-radius: .04rem;
}
.period li.active>a{
    border-color:#DDAF59;
    color:#DDAF59;
}
/* highlight */
.period.highlight li.active>a{
    background-color:#DDAF59;
    color:#FFFFFF;
}
/* highlight_red */
.period.highlight_red li.active>a{
    background-color:#AE5F5A;
    color:#FFFFFF;
    border-color:#AE5F5A;
}
.period.highlight_red li.active>a:hover{
    color:#FFFFFF!important;
}
.period.highlight_red li>a:hover{
    color:#AE5F5A!important;
}
.period.highlight_red li{
    border-color:#AE5F5A;
}
.period.highlight_red li>a{
    color:#AE5F5A;
}